<template>
  <div
    @contextmenu.prevent="rightClick"
    v-if="isOpened"
    class="at-toast"
    :style="customStyle"
  >
    <div :class="classes">
      <div class="toast-body-content">
        <div v-if="image" class="toast-body-content__img">
          <div class="taro-img toast-body-content__img-item">
            <img class="taro-img__mode-scaletofill" :src="image" />
          </div>
        </div>
        <div v-if="icon" class="toast-body-content__icon">
          <span :class="`at-icon-${icon}`" class="at-icon"></span>
        </div>
        <div class="toast-body-content__info">
          <span class="taro-text">{{ text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import classNames from 'classnames'
import component from '@/components/mixins/component'

export default {
  mixins: [component],
  props: {
    text: {
      type: String,
      default: '凹凸实验室'
    },
    icon: {
      type: String,
      default: 'sketch'
    },
    hasMask: {
      type: Boolean,
      default: false
    },
    image: {
      type: String,
      default: 'http://storage.360buyimg.com/mtd/home/group-21533885306540.png'
    },
    isOpened: {
      type: Boolean,
      default: true
    },
    duration: {
      type: Number,
      default: 3000
    },
    status: {
      type: String,
      default: 'loading'
    },
    onClick: {
      type: Function,
      default: () => {}
    },
    onClose: {
      type: Function,
      default: () => {}
    }
  },
  computed: {
    attrs() {
      return {
        icon: {
          type: 'select',
          items: require('@/data/at-icon.json')
        },
        status: {
          type: 'select',
          items: ['', 'loading', 'success', 'error']
        },
        duration: {
          type: 'number',
          max: 20000
        }
      }
    },
    classes() {
      const realImg = this.image || this.statusImg[this.status] || null
      return classNames('toast-body', {
        'at-toast__body--custom-image': this.image,
        'toast-body--text': !realImg && !this.icon,
        [`at-toast__body--${this.status}`]: !!this.status
      })
    }
  },
  data: () => ({
    statusImg: {
      error:
        '',
      success:
        '',
      loading:
        ''
    }
  })
}
</script>
